<!--管理员的个人资料页面，可以修改-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">管理员信息预览</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md6 layui-col-md-offset3">
                                    <h1 style="line-height: 3;text-align: center;">管理员信息查询和修改</h1>
                                    <form id="form-user-info" class="layui-form layui-form-pane" action="">
                                        <script type="text/html" template id="tem-user-info">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">管理员名</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="name" autocomplete="off"
                                                           placeholder="" class="layui-input" value={{ d.name }}>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">管理员密码</label>
                                                <div class="layui-input-block">
                                                    <input type="password" name="password" autocomplete="off"
                                                           placeholder="" class="layui-input" value="">
                                                </div>
                                            </div>
                                            <div class="layui-form-item" pane="">
                                                <label class="layui-form-label">性别</label>
                                                <div class="layui-input-block">
                                                    {{
                                                    getSex(d.sex)
                                                    }}

                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">头像路径</label>
                                                <div class="layui-input-block">
                                                    <input type="text" id="image" name="image" autocomplete="off"
                                                           placeholder="" class="layui-input" value="{{d.image}}">
                                                </div>
                                            </div>
                                            <div class="layui-form-item layui-form-text">
                                                <label class="layui-form-label">人员简述</label>
                                                <div class="layui-input-block">
                                                    <textarea name="description" placeholder=""
                                                              class="layui-textarea">{{d.description}}</textarea>
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">被添加时间</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="time" autocomplete="off"
                                                           placeholder="" class="layui-input" value="{{d.time}}"
                                                           disabled>
                                                </div>
                                            </div>
                                        </script>

                                    </form>
                                    <div class="layui-btn-container">
                                        <button type="button" class="layui-btn layui-btn-fluid"
                                                onclick="updataUserData()">点击修改
                                        </button>

                                        <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid">
                                            返回主面板
                                        </button>

                                    </div>

                                </div>
                                <div class="layui-col-md3"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
    });

    var data = { //数据
        "name": $.cookie('name'),
        "sex": $.cookie('sex'),
        "description": $.cookie('description'),
        "image": $.cookie('image'),
        "time": stamp2Time($.cookie('time'))
    };
    var getTpl = $('#tem-user-info')[0].innerHTML
        , view = document.getElementById('form-user-info');
    layui.laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
    });

    /**
     * 男的和女的
     * @param sex
     * @returns {string}
     */
    function getSex(sex) {
        if (sex == '男') {
            console.log(sex);
            return '  <input id="sex-man" class="sex" type="radio" name="sex" value="男" title="男" checked=""><input class="sex" id="sex-woman" type="radio" name="sex" value="女" title="女" >'
        }
        else {
            return '<input id="sex-man" class="sex" type="radio" name="sex" value="男" title="男" ><input id="sex-woman" class="sex" type="radio" name="sex" value="女" title="女" checked="">';
        }
    }

    function stamp2Time(timestamp) {

        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }

    /**
     * 更新用户信息
     */
    function updataUserData() {

        var name = $($('#form-user-info').find('input[name=\'name\']')).val();
        var password = $($('#form-user-info').find('input[name=\'password\']')).val();
        var image = $('#image').val();
        var description = $($('#form-user-info').find('textarea[name=\'description\']')).val();
        var sex = $('.layui-form-radioed').prev().val();
        var id = $.cookie('id');
        var obj = new Object();
        obj.name = name;
        obj.password = password;
        obj.image = image;
        obj.decription = description;
        obj.sex = sex;
        var requestJson = JSON.stringify(obj);
        //发送异步请求
        jQuery.ajax({
            url: "/admin/" + id + '.do',
            type: "post",
            data: requestJson,
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {
            console.log(data);
            //第三方扩展皮肤
            layer.alert('提交成功。', {
                icon: 6,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            })
            //将用户名写入cookie中
            $.cookie("name", name, {
                path: "/",
            });
            //将用户头像路径写入到cookie
            $.cookie("image", image, {
                path: "/",
            });
            $.cookie("sex", sex, {
                path: "/",
            });
            $.cookie("description", description, {
                path: "/",
            });
            layer.close(layerIndex);
        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });

    }
</script>